<template>
  <el-upload :class="{ imageUploader: true, imageUploaderEnable: !disabled }" :data="uploadParams" :show-file-list="false" :disabled="disabled" :on-success="onFileChange" :action="api.ROUTE_UPDATE_FILE">
    <div v-if="modelValue" class="image"  :style="{ width: `${size}px`, height: `${size}px`, 'background-image': `url(${modelValue})` }"></div>
    <el-icon v-else class="imageIcon" :style="{ width: `${size}px`, height: `${size}px`, 'line-height': `${size}px` }"><Plus /></el-icon>
  </el-upload>
</template>

<script>
export default {
  props: {
    modelValue: null,
    disabled: null,
    size: null
  },
  data() {
    return {
      uploadParams: {
        userId: window.localStorage.userId
      }
    };
  },
  methods: {
    onFileChange(data) {
      if (data.success) {
        this.$emit('update:modelValue', data.result.url);
      }
    }
  }
};
</script>

<style lang='less' scoped>
.imageUploader {
  :global(.el-upload) {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: default;
    position: relative;
    overflow: hidden;
  }
}
.imageUploaderEnable {
  :global(.el-upload) {
    cursor: pointer;
  }
  :global(.el-upload:hover) {
    border-color: #409eff;
  }
}
.imageIcon {
  font-size: 30px;
  color: #8c939d;
  text-align: center;
}
.imageIcon:hover {
  color: #409eff;
}
.image {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: white;
}
</style>
